<template>
  <div class="app">
    <!-- 导航区 -->
  <ul class="navigate">
    <li v-for="(item,index) in navItems" :key="index"
    :class="channel == item ? 'selected' :'unselected'"  
    @click="() => { channel = item; console.log(channel); }"
    >
      <RouterLink class="size" :to="item.to">
        <i :class="item.icon"></i>
        <span class="span-channel">{{ item.label }}</span>
      </RouterLink>
    </li>
  </ul>
    <button @click="openModal" class="loginpage">登录</button>
    <div class="size-more">
      <RouterLink class="size" to="/more"
        ><i class="iconfont icon-gengduo"> <span class="span-channel">更多</span></i></RouterLink
      >
    </div>
    <LoginModal :isVisible="isModalVisible" @close="closeModal" />
  </div>
</template>



<script setup>
import { ref } from 'vue';
import LoginModal from '@/components/LoginModal.vue';
const navItems = ref([
  { to: '/discover', label: '发现', icon: 'iconfont icon-faxian' },
  { to: '/release', label: '发布', icon: 'iconfont icon-fabu' },
  { to: '/notice', label: '通知', icon: 'iconfont icon-tongzhi' },
  { to: '/myself', label: '我的', icon: 'iconfont icon-wode' }
]);
const channel = ref(navItems.value[0])

const isModalVisible = ref(false); 

const openModal = () => {
  isModalVisible.value = true; // 打开模态框
};

const closeModal = () => {
  isModalVisible.value = false; // 关闭模态框
};
</script>

<style scoped>
.app {
  float: left;
  position: relative;
  left: 10px;
  width: 252.67px;
  height: calc(100vh - 72px);
  overflow-y: scroll;
  padding-top: 16px;
  margin-left: 16px;
  margin-top: 72px;
  overflow: visible;
}

.navigate {
  width: 100%;
  min-height: auto;
}

.navigate li{ 
  width: 201px;
  height: 48px;
  border-radius: 99px ;
  padding-left: 16px;
  margin-bottom: 8px;
  cursor: pointer;
}

.navigate li:hover{
  color:#33333399;
  background-color: #00000008;
}


.navigate li i{
  font-size: 24px;
  font-weight: 800;
  background-color: none;
}

.span-channel{
  color: #333333;
  font-size: 16px;
  font-weight: 600;
  margin-left: 12px;
}

.size {
  display: flex;
  color: #333333;
  width: 100%;
  height: 48px;
  align-items: center;
}

.size-more {
  position: fixed;
  bottom: 20px;
  margin-left: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  height: 48px;
  width: 241.59px;
  display: flex;
}

.gengduo {
  display: flex;
  bottom: 100px;
}

.loginpage {
  margin-top: 10px;
  width: 201px;
  height: 47.99px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: red;
  border: 0;
  color: white;
  font-weight: 600;
  margin-bottom: 8px;
  border-radius: 99px;
}
</style>
